<template>
<div>
  <p style="text-align: center; margin: 0 0 40px">请选择将指定专家加入专家组</p>
  <div style="text-align: center">
    <el-transfer
      style="text-align: left; display: inline-block"
      v-model="value"
      filterable
      
      :render-content="renderFunc"
      :titles="['专家列表', '专家组成员']"
      :button-texts="['移除', '添加']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      :data="data">
      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
    </el-transfer>
  </div>
</div>
</template>
<script>
  export default {
    data() { //获得专家信息
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`
          });
        }
        return data;
      };
      return {
        data: [],
        value: [],
        //value4: [3],
        renderFunc(h, option) {
          return <span>{ option.key } - { option.label }</span>;
        }
      };
    },

    methods: {
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      },
      generateData(list){
        //定义空数组传递列表项内容
        const data = [];
        //foreach遍历list
        list.forEach(item => {
          data.push({
            key: item.specialist_id,
            label: item.specialist_realname
          });
           //console.log(item.specialist_realname)
        });

        this.data = data;
      }
    },
    async mounted(){
      var data=await this.$http.get('/getallspecialuserlist');
      //拿到专家信息，加载到列表框中
      var speciallist =data.data.speciallist;
      this.generateData(speciallist);

      //加载被选中对应项目组内的专家
      var selectIdList = data.data.selectIdList;
      console.log(selectIdList)
      this.value = selectIdList;
    }
  };
</script>